<!--
 * @Description: 
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-21 20:14:14
 * @LastEditors: zhou
 * @LastEditTime: 2022-04-25 14:27:36
-->
<template>
    <div class="pro-shade">
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item top"></div>
        <div class="item bottom"></div>
    </div>
</template>

<script>
export default {
    name: "ProShade",
    props: {

    },
    data() {
        return {};
    },
    computed: {},
    methods: {

    },
};
</script>

<style lang="scss" scoped>
.pro-shade {
    .item {
        position: absolute;
        z-index: 2;
        opacity: 0.9;
    }
    .left {
        left: 0;
        top: 0;
        bottom: 0;
        width: vw(600);
        // background: linear-gradient(
        //     90deg,
        //     rgba(6, 14, 48, 1),
        //     rgba(6, 14, 48, 0.9),
        //     rgba(6, 14, 48, 0.9),
        //     rgba(6, 14, 48, 0.8),
        //     rgba(6, 14, 48, 0.8),
        //     rgba(6, 14, 48, 0.5),
        //     rgba(6, 14, 48, 0.2),
        //     rgba(6, 14, 48, 0),
        // );
        background: linear-gradient(90deg, rgba(6, 24, 46, 0.88) 80.46%, rgba(5, 23, 46, 0) 100%);
    }
    .right {
        top: 0;
        bottom: 0;
        right: 0;
        width: vw(600);
        background: linear-gradient(-90deg, rgba(6, 24, 46, 0.88) 80.46%, rgba(5, 23, 46, 0) 100%);
    }
    .top {
        left: 0;
        top: 0;
        right: 0;
        height: vh(90);
        background: linear-gradient(180deg,rgba(6,24,46,0.88) 50%, rgba(5,23,46,0))
        // background: linear-gradient(
        //     180deg,
        //     rgba(6, 14, 48, 1),
        //     rgba(6, 14, 48, 0.8),
        //     rgba(6, 14, 48, 0.7),
        //     rgba(6, 14, 48, 0.5),
        //     rgba(6, 14, 48, 0)
        // );

    }
    .bottom {
        left: 0;
        bottom: 0;
        right: 0;
        // height: vh(40);
        // background: linear-gradient(
        //     180deg,
        //     rgba(6, 14, 48, 0),
        //     rgba(6, 14, 48, 0.7),rgba(6, 14, 48, 0.5),
        //     rgba(6, 14, 48, 1)
        // );
        // background: linear-gradient(
        //     0deg,
        //     rgba(6, 14, 48, 1),
        //     rgba(6, 14, 48, 0.8),
        //     rgba(6, 14, 48, 0.7),
        //     rgba(6, 14, 48, 0.5),
        //     rgba(6, 14, 48, 0)
        // );
    }
}
</style>
